/*
 * @Author: ph
 * @Date: 2022-04-24 15:21:11
 * @Last Modified by: ph
 * @Last Modified time: 2022-04-24 15:21:11
 */

<template>
    <div class="g-wrapper">
        <div class="contentTopTitle">
            <div class="fl">
                <div class="title">云网-物联网</div>
            </div>
        </div>
        <div>
            <el-form
                :inline="true"
                :model="queryParams"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="账期" size="mini">
                    <el-date-picker
                        v-model="queryParams.acctMonth"
                        type="month"
                        placeholder="选择日期"
                        value-format="yyyyMM"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="科目名称" size="mini">
                    <el-select v-model="queryParams.subName" clearable>
                        <el-option 
                                    v-for="(item,index) in subNameOptions"
                                    :key="index"
                                    :value="item"
                                    :label="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地市查询" style="margin-top:-2px">
                    <dx-cascader :area_id.sync="queryParams.areaId" />
                </el-form-item>

                
                <el-form-item style="width: 5%">
                    <el-button size="small" type="primary" @click="search()"
                        >查询</el-button
                    >
                </el-form-item>
                <el-form-item style="width: 5%">
                    <el-button
                        size="small"
                        style="margin-left: 10px"
                        type="orange"
                        @click="exportExcel"
                        >导出</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <!-- <p class="g-unit">单位: 元</p> -->
        <div class="table-content">
            <div class="tableBox">
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    border
                    stripe
					id="table1"
                    ref="table"
                >
                    <el-table-column
                        label="科目ID"
                        prop="subCode"
                        width="140"
                    ></el-table-column>
                    <el-table-column
                        width="120"
                        prop="subName"
                        label="科目名称"
                    ></el-table-column>
                    <el-table-column
                        width="120"
                        prop="acctMonth"
                        label="账期"
                    ></el-table-column>
                    <el-table-column
                        width="120"
                        prop="latnName"
                        label="地市名"
                    ></el-table-column>
                    <el-table-column
                        width="120"
                        prop="areaName"
                        label="区县名"
                    ></el-table-column>
                    <el-table-column
                        width="230"
                        prop="ccustName"
                        label="客户名称"
                    ></el-table-column>
                    <el-table-column
                        width="120"
                        prop="tol"
                        label="落收金额"
                    ></el-table-column>
                    <el-table-column
                        width="180"
                        prop="datail1"
                        label="合同信息1"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        width="180"
                        prop="datail2"
                        label="合同信息2"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        width="180"
                        prop="datail3"
                        label="合同信息3"
                        show-overflow-tooltip
                    >
                    </el-table-column>

                </el-table>
            </div>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.pageNum"
                    :page-sizes="[10, 50, 100]"
                    :page-size="queryParams.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                    </el-pagination>
        </div>
    </div>
</template>

<script>
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
// import { mergeRow } from "@/utils/mixin";
// import FileSaver from 'file-saver';
// import XLSX from 'xlsx';

export default {
    name: "cloudStandard",
    data() {
        // var d = new Date().getMonth
        return {
            queryParams: {
                subName: '',
                areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
                acctMonth: '',
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            subNameOptions: [],
            // accountInfo: {},
            tableLoading: false,
            tableData: [],
            // spanArr: [],
            // titles: "",
            areaIds: []
        };
    },
    created(){
        this.initData();
        console.log(getSessionStorage("accountInfo"));
        this.queryParams.acctMonth = this.moment().subtract(0, "months").format("YYYYMM");
    },
    mounted() {

        // that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        // that.queryParams.areaId = that.accountInfo.areaId;
        // this.initData();
    },
    methods: {
        async initData() {
          this.getData();
          this.getSubNames();
        },
        getData() {
            // var that = this;

            this.tableLoading = true;
            this.tableData = [];
            $budgetAPI.getInternetOfThingsData(
                {
                    // subName: this.queryParams,
                    // areaId: this.queryParams.areaIds,
                    // pageNum: this.queryParams.pageNum,
                    // pageSize: this.queryParams.pageSize
                    ...this.queryParams
                },
                (res) => {
                    if (res && res.code == 0) {
                        this.tableLoading = false;
                        this.tableData = res.content.data;
                        this.total = res.content.total;
                    }
                }
            );
        },

        search() {
            this.queryParams.pageNum = 1;
            this.getData();
        },
        exportExcel(){
            let areaId = this.queryParams.areaId,
                subName = this.queryParams.subName,
                acctMonth = this.queryParams.acctMonth,
                token = getCookie("token");

            window.location.href =
                    prefixAPI.hp + '/api/internetOfThings/exportInternetOfThingsData?' +
                    "areaId=" +
                    areaId +
                    "&subName=" +
                    subName +
                    "&acctMonth=" +
                    acctMonth +
                    "&token=" +
                    token;
        },
        // exportExcel() {
        //     var xlsxParam = {
        //         raw: true
        //     }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
        //     let workbook = XLSX.utils.book_new();
        //     let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
        //     XLSX.utils.book_append_sheet(workbook, ws1, '新增产品');
        //     let wbout = XLSX.write(workbook, {
        //         bookType: 'xlsx',
        //         bookSST: true,
        //         type: 'array'
        //     });
        //     try {
        //         FileSaver.saveAs(
        //             new Blob([wbout], {
        //                 type: 'application/octet-stream;charset=utf-8"'
        //             }),
        //             '新增产品.xlsx'
        //         );
        //     } catch (e) {
        //         if (typeof console !== 'undefined') console.log(e, wbOut);
        //     }
        //     return wbout;
        // },

        
        //获取科目名称
        getSubNames(){
          $budgetAPI.getIOTSubNames({}, res => {
              console.log(res);
              this.subNameOptions = res.content;
          })
        },

        handleSizeChange(size){
            this.queryParams.pageSize = size;
            this.getData();
        },
        handleCurrentChange(num){
            this.queryParams.pageNum = num;
            this.getData();
        },

        
    },
};
</script>

<style lang="scss" scoped>
.g-wrapper {
    .table-content {
      margin-top: 20px;
      overflow: hidden;
        .table-header {
            display: flex;
            justify-content: space-between;
            .btn-right {
                display: flex;
            }
            .table-title {
                font-size: 14px;
                font-weight: bold;
                height: 30px;
                line-height: 30px;
                span {
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background-color: #418ee9;
                    border-radius: 1000%;
                    overflow: hidden;
                    margin-right: 10px;
                    margin-bottom: 3px;
                }
            }
        }
        .content {
            position: relative;
        }
        .el-pagination {
            float: right;
            margin-top: 10px;
        }
    }
}
/deep/ .el-form-item--mini .el-form-item__content {
	line-height: 35px;
}
</style>
<style>
.el-tooltip__popper{
    max-width: 520px;
    white-space: pre-wrap;
}
</style>